import React, { Component } from 'react'
import index from './index.module.css'
export default class Footer extends Component {
    isCheckedAll = (e) => {
        this.props.checkedAllTodo(e.target.checked)
    }
    delectChecked = ()=>{
        this.props.delectChecked()
    }
    render() {
        const { todos } = this.props
        let allTodo = todos.length
        let checkedTodo = todos.filter(todo => {
            return todo.checked === true
        })
        let checkedTodoLen = checkedTodo.length
        return (
            <div className={index.footer}>
                <label  onChange={this.isCheckedAll} className={index.label}>
                    <input type="checkbox" />
                    <div>
                        已完成{checkedTodoLen}/总共{allTodo}
                    </div>
                </label>
                <div className={index.delect} onClick={this.delectChecked}>删除选中</div>
            </div>

        )
    }
}
